<template>
    <div class="bx">
        <div class="left">
            <img @click="youyi" id="img2" src="../assets/you.png" alt="">
            <img @click="zuoyi" id="img1" src="../assets/zuo.png" alt="">
            <div class="swiper">
                <div id="sw1" class="sw1">
                    <img :src="data.src" alt="">
                    <img src="https://imgpro.ziroom.com/d7a3873b-3720-4782-94ab-f15268c1f046_535.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img src="https://imgpro.ziroom.com/d7795fd4-c6d7-4329-9b3f-07e41cef094c_189.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img src="https://imgpro.ziroom.com/e6c9dadce7ab03531d1dcfa45ec81306_668.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img src="https://imgpro.ziroom.com/a3897f40c24f6c9ff360e57aa203a442_012.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img src="https://imgpro.ziroom.com/99f4cc4b3cf85a7504d45ff8753741e8_267.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img src="https://imgpro.ziroom.com/e23ed876264d253b9c168e164fd82265_021.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img src="https://imgpro.ziroom.com/9ca7f634-4360-4ff2-a6dc-ded1f4518473_617.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                </div>
                <div class="sw2">
                    
                    <div class="sw3" id="sw3">
                    <img :class="{'active':ss==1}" @click="yd('0px'),ss=1" :src="data.src" alt="">
                    <img :class="{'active':ss==2}" @click="yd('800px'),ss=2" src="https://imgpro.ziroom.com/d7a3873b-3720-4782-94ab-f15268c1f046_535.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img :class="{'active':ss==3}" @click="yd('1600px'),ss=3" src="https://imgpro.ziroom.com/d7795fd4-c6d7-4329-9b3f-07e41cef094c_189.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img :class="{'active':ss==4}" @click="yd('2400px'),ss=4" src="https://imgpro.ziroom.com/e6c9dadce7ab03531d1dcfa45ec81306_668.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img :class="{'active':ss==5}" @click="yd('3200px'),ss=5" src="https://imgpro.ziroom.com/a3897f40c24f6c9ff360e57aa203a442_012.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img :class="{'active':ss==6}" @click="yd('4000px'),ss=6" src="https://imgpro.ziroom.com/99f4cc4b3cf85a7504d45ff8753741e8_267.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img :class="{'active':ss==7}" @click="yd('4800px'),ss=7" src="https://imgpro.ziroom.com/e23ed876264d253b9c168e164fd82265_021.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    <img :class="{'active':ss==8}" @click="yd('5600px'),ss=8" src="https://imgpro.ziroom.com/9ca7f634-4360-4ff2-a6dc-ded1f4518473_617.jpg_C_800_600_Q90.jpg_C_800_600_Q90.webp" alt="">
                    </div>
                </div>
            </div>

            <a href="#a1">房源简介</a>
            <a href="#a2">租约信息</a>
            <a href="#a3">室友信息</a>
            <a href="#a4">小区简介</a>
            <a href="#a5">周边配套</a>

            <div class="a1" id="a1">
                <h2>房源简介</h2>
                <p>编号 BJZRGY0818274983_03 </p>
                <p>营业执照 / 合同示范文本 / 投诉记录 / 信用记录</p>
                <span>房源位置 这套位于煤炭公司家属楼的房源属于抢手房源。
                小区总共有2栋楼。小区密度低，保障了居住的私密性与舒适度。小区开放1个门。楼栋概况 本小区于1990年建成。楼栋总高6层。楼道卫生状况较好，日常有保洁阿姨专门清扫。单元没有门禁。房源概况 这间3居室的03卧空间较大，可以独住、合住。房源位于第3层，卧室朝向为南。卧室有阳台，可以洗衣晾晒、收纳物品，让空间得到延伸。装修亮点 卧室装修为原木色系，让人在木色与白色的交织中，感受自然纯粹。房间为环保装修，
                板材结实耐用。且配备了国内外优秀品牌家电，品质安全有保障。
                </span>
                <img src="../assets/pz.png" alt="">
            </div>

            <div class="a2" id="a2">
                <h2>租约信息</h2>
                <ul>
                    <li>
                    <p>可入住日期 :</p><span>随时入住</span>
                    </li>
                    <li>
                    <p>签约时长 :</p><span>需要签约到2023-02-27</span>
                    </li>
                    <li>
                    <p>注意事项 :</p><b>租房合同签订步骤</b>
                    </li>
                </ul>
            </div>

            <div class="a3" id="a3">
                <h2>室友信息</h2>
                <ul>
                    <li>
                        <span>01卧</span>
                        <img src="../assets/OIP-C.jpg" alt="">
                        <span>入住9个月</span>
                        <p>男  |  处女座</p>
                    </li>
                    <li>
                        <span>02卧</span>
                        <img src="../assets/666.jpg" alt="">
                        <span>入住3个月</span>
                        <p>女  |  射手座</p>
                    </li>
                </ul>
            </div>

            <div class="a4" id="a4">
                <h2>小区简介</h2>
                <img src="https://amsimg.ziroom.com/65caccfc-f0f1-4bd9-82b6-a42296d95ab3.jpg_C_800_600_Q100.jpg" alt="">
                <img src="../assets/rg.jpg" alt="">
                <p>小区详情</p>
            </div>
        </div>
        
        




        <div class="right">
            <div class="r1">
                 <img src="../assets/map.jpeg" alt="">
                <h2>{{data.title}}</h2>
            </div>
            <p>￥  {{data.price}}   /月(季付价)</p>
            <img style="display: block;margin: 20px 0;" src="../assets/rg2.jpg" alt="">
        
        <ul>
            <li>
                <p>21.3㎡</p>
                <span>使用面积</span>
            </li>
            <li>
                <p>朝南</p>
                <span>朝向</span>
            </li>
            <li>
                <p>三室一厅</p>
                <span>户型</span>
            </li>
        </ul>
        <ul>
            <li>
                <p>位置</p>
                <span> 小区距15号线石门站步行约355米</span>
            </li>
             <li>
                <p>楼层</p>
                <span>3/6</span>
            </li>
             <li>
                <p>电梯</p>
                <span> 无</span>
            </li>
             <li>
                <p>年代</p>
                <span> 1990年建成</span>
            </li>
        </ul>
        <div class="rg3">
            <div class="rg31">
            <img src="../assets/666.jpeg" alt="">
            <p>在线客服王牡丹</p>
            <span>56801900 转 108747</span>
            </div>
            
            <button>咨询房源</button>
            <button>预约看房</button>
            <img src="../assets/free-head.png" alt="">
            <i style="display:block;width:100%">扫一扫</i>
            <i style="width:100%">小程序看房</i>
        </div>
        </div>
        <div class="a5" id="a5">
                <h2>周边配套</h2>
                <div class="map-container">
                <div id="container"></div>
                <img style="width:100%;height:111px;" src="../assets/pt.png" alt="">
  </div>
      
        </div>
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
    export default {
        data() {
            return {
                map: null,
                zy:0,
                ss:1,
                id:'',
                data:{},
            }
        },
        mounted(){ this.initMap();this.lid()},
        methods:{
            lid(){//获取数据
            let id=this.$store.state.id//获取房屋列表存到全局的id属性值
            this.axios.get(`${this.$store.state.url}/xh/user/listX?id=${id}`).then(res=>{//发送请求
            this.data=res.data[0]//拿到数据
            console.log(this.data)
    })
            },
             initMap() {
      AMapLoader.load({
        key: "3e9d4aa4e06f36dea5786c22e25bf90b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",
        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins: ["AMap.AdvancedInfoWindow", "AMap.PlaceSearch", "AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [102.725123,25.028924], //初始化地图中心点位置
            // isCustom: true,
          });
          // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
            position: new AMap.LngLat(102.725123,25.028924),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '昆明市官渡区证券大厦'
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
        marker.on('click',function(e){
        console.log('当前位置是:官渡区'); 
        var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:`<div style="background:#fff;color:red;padding:10px;"
        >昆明市官渡区证券大厦</div>`, //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(12, -45),
    });
    
        infoWindow.open(map, e.target.getPosition())
        //打开信息窗体
        //e.target就是被点击的Marker
})
          AMap.plugin(
            [
              "AMap.ToolBar",
              "AMap.Scale",
              "AMap.HawkEye",
              "AMap.MapType",
              "AMap.Geolocation",
            ],
            function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              map.addControl(new AMap.ToolBar());

              // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
              map.addControl(new AMap.Scale());

              // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
              // map.addControl(new AMap.HawkEye({isOpen:true}));

              // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
              map.addControl(
                new AMap.MapType({
                  position: "LT",
                  offset: [100, 10],
                })
              );

              // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
              map.addControl(
                new AMap.Geolocation({
                  position: "LB",
                  offset: [140, 10],
                })
              );
            }
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },


            youyi(){//右边移动
                if(this.zy<40){
                this.zy+=20
                let you=document.getElementById('sw3')
                you.style=`transform:translateX(-${this.zy}%)`
                }
            },
            zuoyi(){//左边移动
                if(this.zy>0){
                this.zy-=20
                let you=document.getElementById('sw3')
                you.style=`transform:translateX(-${this.zy}%)`
                }
            },
            yd(a){//大图显示
                let you=document.getElementById('sw1')
                you.style=`transform:translateX(-${a})`
            }
        }
    }
</script>

<style lang="scss" scoped>
.bx{
    width: 1252px;
    margin: 80px auto;
    .left{
        position: relative;
        box-sizing: border-box;
        width: 800px;
        float: left;
        #img2,#img1{
        cursor: pointer;
        display: block;
        position: absolute;
        border-radius:50%;
        z-index: 1;
        &:active{
            box-shadow: 0 0 10px rgb(255, 130, 77);
        }
                }
        #img2{
        top: 630px;
        left: 750px;
                }
        #img1{
        top: 630px;
        left: 0px;
                }

        .swiper{
            width: 800px;
            overflow: hidden;
            padding-bottom: 20px;
            border-bottom: 2px solid rgb(255, 130, 77);
            .sw1{
                transition:all 0.5s ;
                width: 6400px;
                height: 600px;
                overflow: hidden;
                img{
                    display: block;
                    float: left;
                    width: 800px;
                    height: 600px;
                }
            }
            .sw2{
                width: 700px;
                height: 90px;
                overflow: hidden;
                margin:10px auto;
                &::-webkit-scrollbar {
                display: none;
                }
                .sw3{
                    transition:all 0.5s ;
                    width: 1120px;
                    height: 90px;
                img{
                    cursor: pointer;
                    display: block;
                    float: left;
                    margin:0 10px;
                    width: 120px;
                    height: 90px;
                    transition:all 0.5s ;
                    filter:brightness(0.5);
                    &.active{
                        filter:brightness(1);
                    }
                }
                }
            }    
        }
        a{
        text-decoration: none;
        cursor: pointer;
        color: rgb(111, 110, 110);
        display: inline-block;
        margin:10px 10px 20px 0;
        &:hover{color:rgb(255, 130, 77);}
        }

        .a1{
            margin-top: 10px;
            h2{
                margin: 20px 0;
            }
            p:nth-of-type(1){
                float: left;
                width: 400px;
                color: rgb(187, 187, 187);
            }
            p:nth-of-type(2){
                float: right;
                width: 400px;
                text-align: right;
                color: rgb(187, 187, 187);
            }
            span{
                display: block;
                margin:60px 0px 20px 0;
                color: rgb(100, 100, 100);
            }
            img{
                margin-left:30px
            }

        }
        .a2{
            margin-top: 70px;
            ul{
                margin-top: 20px;
                list-style-type: none;
                li{
                    display: flex;
                    p{
                        font-size: 20px;
                        margin:10px 10px;
                        color: rgb(109, 109, 109);
                    }
                    span{
                        line-height: 46px;
                        font-size: 20px;
                    }
                    b{
                        line-height: 46px;
                        font-size: 20px;
                        cursor: pointer;
                        &:hover{
                            color: rgb(255, 130, 77);
                        }
                    }
                }
            }
        }
        .a3{
            margin-top: 60px;
            ul{
                margin-top: 20px;
                list-style-type: none;
                display: flex;
                padding-top: 20px;
                justify-content: space-evenly;
                li{
                    
                    align-items: center;
                    padding: 10px;
                    width: 330px;
                    height: 120px;
                    border-radius: 10px;
                    box-shadow: 0 0 5px #bfbfbf;
                    img{
                        width: 70px;
                        border:2px solid #f07b3f ;
                        height: 70px;
                        display: block;

                        float: left;
                        border-radius: 50%;
                    }
                    span:nth-of-type(1){
                        display: block;
                        float: right;
                        color: #f07b3f ;
                        font-size: 30px;
                        margin:0 10px 10px 0;
                    }
                     span:nth-of-type(2){
                        font-size: 20px;
                        font-weight:bolder;
                        margin:30px 0 0 40px;
                        display: block;
                        text-align: center;
                        margin-bottom: 10px;
                    }
                    p{
                        margin-left: -30px;
                        text-align: center;
                        color: rgb(127, 127, 127);
                    }

                }
            }
        }
        .a4{
            margin-top: 60px;
            h2{
                margin-bottom: 20px;
            }
            img:nth-of-type(1){
                margin-left: 20px;
                width: 300px;
                height: 208px;
            }
            p{
                margin: 10px 0 20px 20px;
                width: 670px;
                padding: 20px 0;
                font-size: 20px;
                text-align: center;
                border:1px solid #5f5f5f ;
                &:hover{
                    color:#fb3e0a ;
                    border:1px solid #fb3e0a ;
                    cursor: pointer;
                }
            }
        }
        
    }
    .a5{
            height: 800px;
            width: 100%;
            overflow: hidden;
            float: left;
            b{
                display: block;
                width: 100%;
                height: 200px;
            }
            h2{
                margin-bottom: 20px;
            }
        }
    .right{
        width: 340px;
        float: right;
        .r1{
            width: 100%;
            display: flex;
            img{
                width: 30px;
                height:30px;
            }
           
        }
        p{
                font-size: 30px;
                color: #fb3e0a;
            }
        ul:nth-of-type(1){
            width: 100%;
            display: flex;
            list-style-type: none;
            justify-content: space-evenly;
            li{
               width: 80px;
               height: 40px;
               display: flex;
               flex-wrap: wrap;
               text-align: center;
               p{
                font-size: 15px;
                width: 80px;
                color: #5f5f5f;
               } 
               span{
                width: 80px;
               }
            }
        }
        ul:nth-of-type(2){
            margin-top: 20px;
            width: 100%;
            list-style-type: none;
            
            li{
               border-top:1px solid #bfbfbf ;
               height: 40px;
               display: flex;
               padding:5px;
               flex-wrap: nowrap;
               text-align: center;
               p{
                padding-top: 6px;
                font-size: 20px;
                margin-right: 20px;
                color: #acacac;
               } 
               span{
                padding-top: 10px;
               }
              
            }
        }
        .rg3{
            margin-top: 30px;
            padding: 10px;
            text-align: center;
            border:1px solid #e0e0e0 ;
            
            .rg31{
                display: flex;
                flex-wrap: wrap;
                position: relative;
                p{
                    
                    margin:13px 0 0 10px ;
                    height: 30px;
                }
                span{
                    margin-left: 70px;
                }
                img{
                width: 70px;
                height: 70px;
                border-radius: 50%;
            }
            }
            span{
                position: absolute;
                z-index: 1;
                top: 50px;
                left: 10px;
                color: #acacac;
                color: 13px;
            }
            button:nth-of-type(1){
                width: 300px;
                height: 40px;
                background: 0;
                margin: 20px auto;
                border:1px solid #5f5f5f;
                &:active{
                    color:#fb3e0a ;
                    border:1px solid #fb3e0a ;
                    cursor: pointer;
                }
            }
            button:nth-of-type(2){
                width: 300px;
                height: 40px;
                color: #fff;
                margin-bottom: 20px;
                border:0;
                background-color: #f07b3f;
                &:active{
                    color:#fb3e0a ;
                    cursor: pointer;
                    background-color: #ffd3bd;
                }
            }

        }
    }
    
}
.map-container {
  width: 100%;
  height: 500px;
}
#container {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}
</style>